<!DOCTYPE html>
<html lang="en">
<head>
    <title>stock</title>
    <meta content="width=device-width, initial-scale=1.0,
 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../lib/vue/dist/vue.min.js"></script>
    <script src="../lib/axios/dist/axios.min.js" type="text/javascript"></script>
    <link href="../lib/iview/dist/styles/iview.css" rel="stylesheet" type="text/css">
    <script src="../lib/iview/dist/iview.min.js" type="text/javascript"></script>

</head>
<body>
<div id="app">
    <form v-on:submit.prevent="submit()" style="display: inline-flex;">
        <input type="text" style="width: 200px;" value="" v-model="stockCode" placeholder="请输入股票代码，例如sz002594">
        <select v-model="period">
            <option value="5">5分钟</option>
            <option value="10">10分钟</option>
        </select>
        <button>载入</button>
    </form>
    <ve-candle :data="chartData" :settings="chartSettings"></ve-candle>
</div>

<script src="../lib/echarts/echarts.min.js"></script>
<script src="../lib/vcharts/index.js"></script>
<link href="../lib/vcharts/style.css" rel="stylesheet"/>
<script src="../lib/stomp/sockjs.min.js"></script>
<script src="../lib/stomp/stomp.min.js"></script>

<script>
    var headers = {
        sessionId: new Date()
    };
    var rows = [];
    var vm = new Vue({
        el: '#app',
        data: {
            stockCode: '',
            period: 5,
            stompClient: "",
            stockTopicSub: "",
            chartSettings: {
                showMA: true,
                showVol: true,
                showDataZoom: true
            },
            chartData: {
                columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
                //            rows: [{
                //                '日期': '2004-01-05',
                //                open: 10411.85,
                //                close: 10544.07,
                //                lowest: 10411.85,
                //                highest: 10575.92,
                //                vol: 221290000
                //            },
                //                {
                //                    '日期': '2004-01-06',
                //                    open: 10543.85,
                //                    close: 10538.66,
                //                    lowest: 10454.37,
                //                    highest: 10584.07,
                //                    vol: 191460000
                //                },
                //                {
                //                    '日期': '2004-01-07',
                //                    open: 10535.46,
                //                    close: 10529.03,
                //                    lowest: 10432.12,
                //                    highest: 10587.55,
                //                    vol: 225490000
                //                },
                //
                //
                // ],
                rows: []
            }

        },
        // template:" <ve-wordcloud :data=\"chartData\"></ve-wordcloud>",
        methods: {
           submit(){
               this.$Spin.show({
                   render: (h) => {
                   return h('div', [
                       h('Icon', {
                           'class': 'demo-spin-icon-load',
                           props: {
                               type: 'ios-loading',
                               size: 18
                           }
                       }),
                       h('div', '加载中,请耐心等待...')
                   ])
               }
           });
                if (this.stockCode && this.period) {
                    vm.connect();
                     axios.post('/sub/' + this.stockCode + '/' + this.period, {})
                        .then(function (value) {
                            vm.chartData.rows = [];


                        })
                }
            },
            getRows() {


            },
            connect() {
                var currentPath = window.location.href;
                var pathName = window.location.pathname;
                var pos = currentPath.lastIndexOf(pathName);
                var host = currentPath.substring(0, pos);
                var socket = new SockJS(host + '/connect');
                this.stompClient = Stomp.over(socket);
                this.stompClient.debug = true;
                this.stompClient.heartbeat.outgoing = 10000;
                this.stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
                var stClient = this.stompClient;
                stClient.connect(headers, function (frame) {
                    console.log(vm.stockTopicSub);
                    if (vm.stockTopicSub) {
                        vm.stockTopicSub.unsubscribe();
                    }
                    vm.stockTopicSub = stClient.subscribe('/topic/list', function (message) {
                        var result = message.body;
                        if (result) {
                            vm.chartData.rows = JSON.parse(result)
                          vm.$Spin.hide();
                        }

                    }, headers);
                }, function () {
                    alert("连接未建立！");
                })

            },
            // sub() {
            //     console.log(this.stompClient.connected )
            //     var stClient=this.stompClient;
            //     if (stClient ) {
            //         // if (this.stockTopicSub) {
            //         //     this.stockTopicSub.unsubscribe();
            //         // }
            //         this.stockTopicSub = stClient.subscribe('/topic/list', function (message) {
            //             console.log(message);
            //         }, headers);
            //     }
            // },
            disconnect() {

                if (this.stompClient !== null) {
                    this.stompClient.disconnect();
                }
            }
        },

        created() {
            // this.connect();
        },
        mounted() {


        },
        destroyed() {
            this.disconnect();
        }

    })
</script>
</body>
</html>